<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>安捷能源路由器</title>
    <link rel="stylesheet" th:href="@{/css/normalize.css}">
    <link rel="stylesheet" th:href="@{/css/showPage2.css}">
    <link rel="stylesheet" th:href="@{/css/animation.css}">
    <style>
        .switch-btn {
            cursor: pointer;
            width: 60px;
            height: 28px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #fdfdfd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 15px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }

        .switch-btn:before {
            content: '';
            width: 25px;
            height: 25px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        }

        .switch-btn:checked {
            border-color: #56b0d4;
            box-shadow: #56b0d4 0 0 0 16px inset;
            background-color: #56b0d4;
        }

        .switch-btn:checked:before {
            left: 33px;
        }

        .switch-btn.switch-btn-animbg {
            transition: background-color ease .4s;
        }

        .switch-btn.switch-btn-animbg:before {
            transition: left .3s;
        }

        .switch-btn.switch-btn-animbg:checked {
            box-shadow: #dfdfdf 0 0 0 0 inset;
            background-color: #56b0d4;
            transition: border-color .4s, background-color ease .4s;
        }

        .switch-btn.switch-btn-animbg:checked:before {
            transition: left .3s;
        }

    </style>
</head>
<body>
<div class="top">
    <h2>安捷能源路由器</h2>
    <div id="timeNow">
    </div>
    <div class="sixLink">
        <a href="/multipower/index" style="color: white;">首页</a>
        <a href="#" onclick="checkStatus()" style="color: white;">能耗态势</a>
        <a href="/multipower/showpage3" style="color: white;">建模演示</a>
        <a href="/multipower/showpage5" style="color: white;">模型对比</a>
        <a href="/multipower/showpage4" style="color: white;">工况对比</a>
    </div>
    <div class="temNow">
        <div style="position: absolute;top: 0px;right: 140px;">
            <div style="position: absolute;top: 0;left: -120px;height: 0;width: 90px; height: 50px;">
                <label>实时温度:</label>
            </div>
            <div style="position: absolute;top: 0;left: -30px;height: 50px;width: 50px;">
                <span id="tem">25</span>
            </div>
            <div style="position: absolute;top: -2px;right: -20px;height: 30px;height: 30px;font-size: 20px;font-weight: 500">
                &#8451;
            </div>
        </div>
        <div style="position: absolute;top: 0;right: 0px;">
            <div style="position: absolute;top: 0;left: -100px;height: 0;width: 90px; height: 50px;">
                <label>实时湿度:</label>
            </div>
            <div style="position: absolute;top: 0;left: -10px;height: 50px;width: 50px;">
                <span id="hum">26</span>
            </div>
            <div style="position: absolute;top: -2px;right: -40px;height: 30px;height: 30px;font-size: 20px;font-weight: 500">
                %
            </div>
        </div>
    </div>
</div>
<div class="middle">
    <div class="middle_left">

        <canvas id="myCanvas" width="510px" height="650px" style="position: absolute;top: 120px;right: -440px;">
        </canvas>
        <div id="move">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move00">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move1">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move01">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move4">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move04">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move6">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move06">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move8">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move08">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move10">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move010">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move12">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move012">
            <img th:src="@{/img2/arrowNeed1C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div class="middle_left_tittle">
            <img src="img2/give.png" alt="">
            <div>供给侧</div>
        </div>
        <div class="box">
            <div class="line1">
            </div>
            <div class="box_name">电能</div>
            <div class="left_content">
                <div>
                    <label>电压等级:</label>
                    <span>10kV</span>
                    <div style="position: absolute;top: 42px;right: 100px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <label>日供电量:</label>
                    <span id="dianliang">332</span>
                </div>
            </div>
            <div class="right_content">
                <img th:src="@{/img2/ele2.png}" alt="">
            </div>
        </div>
        <div class="box" style="margin-left: 35px">
            <div class="box_name">光伏</div>
            <div class="left_content">
                <div>
                    <label>转化效率:</label>
                    <span>18%</span>
                    <div style="position: absolute;top: 42px;right: 100px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <label>日发电量:</label>
                    <span id="guangfu">150</span>
                </div>
            </div>
            <div class="right_content">
                <img th:src="@{/img2/guangfu.png}" alt="" style="margin-top: 10px">
            </div>
        </div>
        <div class="box" style="margin-left: 50px">
            <div class="box_name">暖电</div>
            <div class="left_content">
                <div>
                    <label>总储能量:</label>
                    <span>150</span>
                    <div style="position: absolute;top: 15px;right: 100px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                    <div style="position: absolute;top: 42px;right: 100px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <label>日放热量:</label>
                    <span id="nuandian">35</span>
                </div>
            </div>
            <div class="right_content">
                <img th:src="@{/img2/nuandian.png}" alt=""
                     style="margin-left: 12px;margin-top: 10px;width: 50px;height: 50px;">
            </div>
        </div>
        <div class="box" style="margin-left: 45px">
            <div class="box_name">蓄能</div>
            <div class="left_content">
                <div>
                    <label>总储能量:</label>
                    <span id="total">5800</span>
                    <div style="position: absolute;top: 15px;right: 80px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                    <div style="position: absolute;top: 42px;right: 80px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <label>日放能量:</label>
                    <span id="xuneng">140</span>
                </div>
            </div>
            <div class="right_content">
                <img th:src="@{/img2/shuixuneng.png}" alt=""
                     style="margin-left: 12px;margin-top: 10px;width: 50px;height: 50px;">
            </div>
        </div>
        <div class="box" style="margin-left: 45px">
            <div class="box_name">光热</div>
            <div class="left_content">
                <div>
                    <label>日放热量:</label>
                    <span id="guangre">600</span>
                    <div style="position: absolute;top: 15px;right: 100px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <label>转换效率:</label>
                    <span>65%</span>
                </div>
            </div>
            <div class="right_content">
                <img th:src="@{/img2/taiyangneng.png}" alt=""
                     style="margin-left: 12px;margin-top: 10px;width: 50px;height: 50px;">
            </div>
        </div>
        <div class="box" style="margin-left: 35px">
            <div class="box_name" style="width: 40px;left:-42px">地源热泵</div>
            <div class="left_content">
                <div>
                    <label>日取能量:</label>
                    <span id="zhujixuneng">2150</span>
                    <div style="position: absolute;top: 15px;right: 80px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                    <div style="position: absolute;top: 42px;right: 80px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <label>日放能量:</label>
                    <span id="rebeng">1800</span>
                </div>
            </div>
            <div class="right_content">
                <img th:src="@{/img2/rebeng.png}" alt=""
                     style="margin-left: 12px;margin-top: 10px;width: 50px;height: 50px;">
            </div>
        </div>
        <div class="box">
            <div class="box_name" style="top: 5px;">地埋管</div>
            <div class="left_content">
                <div style="margin-top: 15px">
                    <label>日放能量:</label>
                    <span id="dimaiguan">140</span>
                    <div style="position: absolute;top: 30px;right: 80px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>

            </div>
            <div class="right_content">
                <img th:src="@{/img2/pipe.png}" alt=""
                     style="margin-left: 15px;margin-top: 22px;width: 50px;height: 50px;">
            </div>
        </div>
    </div>
    <div class="middle_m">
        <!--<div class="middle_title">-->
        <!--<img th:src="@{/img2/nengyuanluyou.png}" alt="">-->
        <!--<div>能源路由</div>-->
        <!--</div>-->
        <!-- <div class="guangshu">

        </div> -->
        <div class="middle_m_top">
            <img th:src="@{/img2/kuang-.png}" alt="" style="height: 85px;width: 445px;">
            <div class="middle_m_top_left">
                <div style="font-weight: 500">
                    <label>暖通可再生能源利用率:</label>
                    <span>74%</span><br>
                </div>
                <div style="font-weight: 500">
                    <label>运行费用:</label>
                    <span>10.36/m<sup>2</sup></span>
                </div>

            </div>
            <div class="middle_m_top_right">
                <div style="font-weight: 500">
                    <label>累计减碳:</label>
                    <span>0.837t</span><br>
                </div>
                <div style="font-weight: 500">
                    <label>累计节费:</label>
                    <span>93250元</span>
                </div>
            </div>
            <div class="middle_m_left_content">
                <span>监测&控制&策略下发</span>
            </div>
            <div class="middle_m_right_content">
                <span>能源匹配&自学习&自调整</span>
            </div>
            <div class="middle_m_m_img">
                <img th:src="@{/img2/wangguan.png}" alt="">
            </div>
        </div>
        <div class="middle_m_m">
            <img th:src="@{/img2/qiuti.png}" alt="">
        </div>
        <div class="middle_m_bottom" style="width: 550px;height: 200px;position: absolute" id="lineChart">
        </div>
        <!--<div class="middle_m_bottom" style="height: 550px;height: 200px;position: absolute" id="lineChart1" >-->
        <!--</div>-->
        <div class="middle_m_bottom_button">
            <img th:src="@{/img2/kuang-.png}" alt="">
            <div class="timeButton">
                <div style="position: absolute;top: 0px;left: 0;">
                    <label for="" id="hour">00</label>
                </div>

                <div style="position: absolute;top:10px;left: 35px;font-size:14px">
                    <span>时</span>
                </div>
                <div style="position: absolute;top: 0px;left: 60px;">
                    <label for="" id="minute">00</label>
                </div>
                <div style="position: absolute;top:10px;left: 95px;font-size:14px">
                    <span>分</span>
                </div>
                <div style="position: absolute;top: 0px;left: 120px;">
                    <label for="" id="second">00</label>
                </div>
                <div style="position: absolute;top:10px;left: 160px;font-size:14px">
                    <span>秒</span>
                </div>
                <div class="changebutton">
                    <button type="button" id="start" onclick="timeStart()">开始</button>
                    <button type="button" id="stop" onclick="timeStop()">暂停</button>
                    <button type="button" onclick="timeReset()">重置</button>
                    <!--<input id="button" class="switch-btn switch-btn-animbg" type="checkbox" >-->
                </div>
            </div>
        </div>
        <div class="danwei">kWh</div>
    </div>
    <div class="middle_right">
        <canvas id="myCanvas1" width="510px" height="650px"
                style="position: absolute;top: 120px;left:-440px;z-index:99">
        </canvas>
        <div id="move2">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move02">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move3">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move03">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move5">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move05">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move7">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move07">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move9">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move09">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move11">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move011">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move13">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div id="move013">
            <img th:src="@{img2/arrowNeed2C.png}" style="height: 20px;height: 20px;margin-bottom: 10px" alt="">
        </div>
        <div class="middle_right_tittle">
            <img th:src="@{/img2/xuqiuce.png}" alt="">
            <div>需求侧</div>
        </div>
        <div class="right_box" style="margin-left: 100px">
            <div class="right_box_name" style="width: 20px;right:-25px">办公</div>
            <div class="right_box_left_content">
                <img th:src="@{/img2/bangong.png}" alt="" style="width: 50px;height: 50px;">
            </div>
            <div class="right_box_right_content">
                <div>
                    <label>实际电量:</label>
                    <span id="bangong1">50</span>
                    <div style="position: absolute;top: 15px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                    <div style="position: absolute;top: 42px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <label>需求电量:</label>
                    <span id="bangong2">390</span>
                </div>
            </div>
        </div>
        <div class="right_box" style="margin-left: 65px">
            <div class="right_box_name" style="width: 20px;right:-25px">暖通</div>
            <div class="right_box_left_content">
                <img th:src="@{/img2/nuantong.png}" alt="" style="width: 50px;height: 50px;">
            </div>
            <div class="right_box_right_content">
                <div>
                    <label>实际电量:</label>
                    <span id="nuantong1">100</span>
                    <div style="position: absolute;top: 15px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                    <div style="position: absolute;top: 42px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <label>需求电量:</label>
                    <span id="nuantong2">1110</span>
                </div>
            </div>
        </div>
        <div class="right_box" style="margin-left: 50px">
            <div class="right_box_name" style="width: 20px;right:-25px">照明</div>
            <div class="right_box_left_content">
                <img th:src="@{/img2/zhaoming.png}" alt="" style="width: 50px;height: 50px;">
            </div>
            <div class="right_box_right_content">
                <div>
                    <label>实际电量:</label>
                    <span id="zhaoming1">60</span>
                    <div style="position: absolute;top: 15px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                    <div style="position: absolute;top: 42px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <label>需求电量:</label>
                    <span id="zhaoming2">900</span>
                </div>
            </div>
        </div>
        <div class="right_box" style="margin-left: 60px">
            <div class="right_box_name" style="width: 40px;right:-43px">消防安防</div>
            <div class="right_box_left_content">
                <img th:src="@{/img2/xiaofang.png}" alt="" style="width: 50px;height: 50px;">
            </div>
            <div class="right_box_right_content">
                <div>
                    <label>实际电量:</label>
                    <span id="xiaofang1">35</span>
                    <div style="position: absolute;top: 15px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                    <div style="position: absolute;top: 42px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">
                        kWh
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <label>需求电量:</label>
                    <span id="xiaofang2">450</span>
                </div>
            </div>
        </div>
        <div class="right_box" style="margin-left: 60px">
            <div class="right_box_name" style="width: 40px;right:-43px">办公区域</div>
            <div class="right_box_left_content" style="padding-left: 5px">
                <img th:src="@{/img2/quyu.png}" alt="" style="width: 50px;height: 50px;">
            </div>
            <div class="right_box_right_content">
                <div>
                    <!--<label>实际电量:</label>-->
                    <span id="xuqiu1">35</span>
                    <!--<div style="position: absolute;top: 15px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">kWh</div>-->
                    <!--<div style="position: absolute;top: 42px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">kWh</div>-->
                </div>
                <div style="margin-top: 10px">
                    <!--<label>需求电量:</label>-->
                    <span id="xuqiu2">450</span>
                </div>
                <div id="lineChart2" style="width: 160px;height: 60px;position: absolute;top: 5px;right: 5px;">

                </div>
            </div>
        </div>
        <div class="right_box" style="margin-left: 65px">
            <div class="right_box_name" style="width: 20px;right:-25px;top: 0;">会议室</div>
            <div class="right_box_left_content" style="padding-left: 5px">
                <img th:src="@{/img2/huiyishi.png}" alt="" style="width: 50px;height: 50px;">
            </div>
            <div class="right_box_right_content">
                <div>
                    <!--<label>实际冷量:</label>-->
                    <span id="meet1">140</span>
                    <!--<div style="position: absolute;top: 15px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">kWh</div>-->
                    <!--<div style="position: absolute;top: 42px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">kWh</div>-->
                </div>
                <div style="margin-top: 10px">
                    <!--<label>需求冷量:</label>-->
                    <span id="meet2">3200</span>
                </div>
                <div id="lineChart3" style="width: 160px;height: 60px;position: absolute;top: 5px;right: 5px;">

                </div>
            </div>
        </div>
        <div class="right_box" style="margin-left: 100px">
            <div class="right_box_name" style="width: 20px;right:-25px">餐厅</div>
            <div class="right_box_left_content" style="padding-left: 5px">
                <img th:src="@{/img2/canting.png}" alt="" style="width: 50px;height: 50px;">
            </div>
            <div class="right_box_right_content">
                <div>
                    <!--<label>实际热量:</label>-->
                    <span id="res1">135</span>
                    <!--<div style="position: absolute;top: 15px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">kWh</div>-->
                    <!--<div style="position: absolute;top: 42px;right: 30px;width: 40px;height: 40px;font-size: 16px;font-weight: 500;color:#fff">kWh</div>-->
                </div>
                <div style="margin-top: 10px">
                    <!--<label>需求热量:</label>-->
                    <span id="res2">3450</span>
                </div>
                <div id="lineChart4" style="width: 160px;height: 60px;position: absolute;top: 5px;right: 5px;">

                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/time.js}"></script>
<script th:src="@{/js/bottomChart.js}"></script>
<script th:src="@{/js/canvas.js}"></script>
<script>
    function checkStatus() {
        let flag = window.sessionStorage.getItem("btnStatus");
        console.log("flag");
        console.log(flag);
        if(flag=="true"){
            window.location = "/multipower/showpage2";
        }else {
            window.alert("请先到首页采用策略");
        }
    }
    $(function () {
        draw();
        loadChart();
        loadRightChart();
        loadRightChart1();
        loadRightChart2();
    })
    // function toBack(){
    //     window.history.back(-1);
    // }

</script>
</body>
</html>